<template>
	<jk-dialog
		v-model="showDialog"
		width="800px"
		title="自定义-快捷入口"
		:confirm-btn-loading="confirmBtnLoading"
		@on-cancel="onVisibleChange(false)"
		@on-confirm="onConfirmBtn"
		@on-visible-change="onVisibleChange"
	>
		<div class="category-container">
			<el-radio-group v-model="searchParams.categoryId" size="medium" @change="onRadioChange">
				<el-radio-button
					v-for="(item, index) in categoryList"
					:key="index"
					:label="item.id"
				>{{ item.name }}</el-radio-button>
			</el-radio-group>
		</div>
		<div>
			<div class="flex-between-center margin-bottom-4 margin-top-10">
				<el-tag type="primary" effect="plain" class="flex-start-center">
					<span class="el-icon-tickets item-gap"></span>
					<div class="title-box">
						<span>选项</span>
						<div class="title-box-count">({{ optionList.length }})</div>
					</div>
				</el-tag>
				<div>
					<jk-search-input v-model="searchParams.menuName" class="search-bar-item-size3 item-gap" placeholder="菜单名称" @on-enter="onSearchBtn"></jk-search-input>
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
			<div v-loading="showContentLoading" class="shortcut-container">
				<vuedraggable v-model="optionList" group="site" animation="300" drag-class="dragClass" ghost-class="ghostClass" chosen-class="chosenClass" @start="onStart" @end="onEnd">
					<transition-group class="flex-start-center-wrap">
						<div
							v-for="(item) in optionList"
							:key="item.id"
							class="shortcut-item-box"
						>
							<div class="shortcut-item">
								<div class="shortcut-item-inner move-icon">
									<div class="shortcut-icon">
										<div :class="item.icon"></div>
									</div>
									<div class="shortcut-name">{{ item.name }}</div>
								</div>
							</div>
						</div>
					</transition-group>
				</vuedraggable>
			</div>
		</div>
		<div class="margin-top-10">
			<div class="flex-between-center">
				<el-tag type="primary" effect="plain" class="flex-start-center margin-bottom-4">
					<span class="el-icon-tickets item-gap"></span>
					<div class="title-box">
						<span>已选</span>
						<div class="title-box-count">({{ selectedList.length }})</div>
					</div>
				</el-tag>
				<el-button size="mini" icon="el-icon-delete" plain type="danger" circle @click="onClearBtn"></el-button>
			</div>
			<div class="selected-container">
				<vuedraggable v-model="selectedList" group="site" animation="300" drag-class="dragClass" ghost-class="ghostClass" chosen-class="chosenClass" @start="onStart" @end="onEnd">
					<transition-group class="flex-start-center-wrap">
						<div
							v-for="(item) in selectedList"
							:key="item.id"
							class="shortcut-item-box"
						>
							<div class="shortcut-item">
								<div class="shortcut-item-inner move-icon">
									<div class="shortcut-icon">
										<div :class="item.icon"></div>
									</div>
									<div class="shortcut-name">{{ item.name }}</div>
								</div>
							</div>
						</div>
					</transition-group>
				</vuedraggable>
			</div>
		</div>
	</jk-dialog>
</template>
<script>
    import vuedraggable from 'vuedraggable';
    import { systemAuthListCategoryMenus, systemAuthSaveCustomMenu } from '../../../api/menu';
    import { menuCategoryList } from '../../../utils/jk/status-option-list';
    export default {
        components: {
            vuedraggable
        },
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            existingData: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                searchParams: {
                    categoryId: -1,
                    menuName: '',
                    categoryName: ''
                },
                categoryList: [
                    { id: -1, name: '全部' },
                    ...menuCategoryList
                ],
                style: 'height:100px;',
                optionList: [],
                selectedList: [],
                showDialog: false,
                confirmBtnLoading: false,
                showContentLoading: false,
                drag: false,
                colorList: []
            };
        },
        methods: {
            onClearBtn() {
                this.selectedList = [];
                this.filterData();
            },
            onSearchBtn() {
                this.getMenuListRequest();
            },
            onRadioChange() {
                this.getMenuListRequest();
            },
            onStart() {
                this.drag = true;
            },
            onEnd() {
                this.drag = false;
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
            },
            onConfirmBtn() {
                const ids = this.selectedList.map(x => x.id);
                this.confirmBtnLoading = true;
                systemAuthSaveCustomMenu({
                    ids
                }).then(res => {
                    this.confirmBtnLoading = false;
                    if (res.data.status === 200) {
                        this.$emit('on-confirm');
                    }
                });
            },
            filterData() {
                const ids = this.selectedList.map(x => x.id);
                this.optionList = this.rawData.filter(x => {
                    return !ids.includes(x.id);
                });
            },
            getMenuListRequest() {
                this.optionList = [];
                this.showContentLoading = true;
                const params = JSON.parse(JSON.stringify(this.searchParams));
                const categoryItem = this.categoryList.find(x => x.id === params.categoryId) || {};
                params.categoryName = params.categoryId === -1 ? '' : categoryItem.name;
                delete params.categoryId;
                return systemAuthListCategoryMenus(params).then(res => {
                    this.showContentLoading = false;
                    if (res.data.status === 200) {
                        this.rawData = res.data.res || [];
                        this.filterData();
                    }
                });
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.selectedList = JSON.parse(JSON.stringify(this.existingData));
                    this.getMenuListRequest();
                }
            }
        }
    };
</script>
<style scoped lang="scss">
    $height: 350px;
    $border_color: #dcdee2;
    .category-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .shortcut-container {
        width: 100%;
        height: $height;
        border: solid 1px $border_color;
        border-radius: 4px;
        padding: 4px 4px;
        overflow: auto;
    }
    .shortcut-item-box {
        width: calc(100% / 6);
        padding: 0 4px;
    }
    .title-box {
        display: flex;
        align-items: center;
        .title-box-count {
            font-weight: 500;
            font-size: 14px;
        }
    }
    .selected-container {
        width: 100%;
        height: 100px;
        padding: 4px 4px;
        box-sizing: border-box;
        border: dashed 1px #2d8cf0;
        border-radius: 6px;
        overflow: auto;
    }
    .move-icon:hover {
        cursor: move!important;
    }
    @import "./shortcutsItem/index";

</style>
